<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝网-淘！我喜欢</title>
</head>
<style type="text/css">
/*清除内外边距*/
*{
	padding:0;
	margin:0 auto;
	
}
/*清除*/
/*头部文字区域*/

#dingbu{
	font-family:宋体;
	font-size:12px;
	background-color:#f5f5f5;
	overflow:hidden;
	width:100%;
	line-height:37px;
	letter-spacing:2.5px;
	border-bottom:#eee;
	color:#6c6c6c;
}
#dingbu .dalu{
	margin-left:80px;
}
#dingbu .qin{
    margin-top:0;
    color:#f22e00;
} 

#dingbu .gouwuche .lin{
	color:#f22e00;
}
#dingbu .wode{
	margin-left:310px;
}
#dingbu .wangzhan .daohang{	
	color:#fe4400;
}
/*头部文字区域结束*/
/*中间杭州抢票*/
#qiang{
width:85px;
height:70px;
background:#4f0cb0;
float:left;
}
#piao{
width:74px;
height:70px;
background:#4f0cb0;
float:right;	
}
/*中间杭州抢票结束*/
/*第三部分分成三个小块*/
#kongbai{
	width:1367px;
	height:30px;
	background-color:#ffffff;
}
#com{
	width:1367px;
	height:99px;
	background-color:#ffffff;
	font-size:12px;
    font-family:宋体;
    float:left;
}
#com .tao{
	margin-left:110px;
	float:left;
	margin-top:10px;
}
#com .bei{
	float:left;
	width:60px;
	height:30px;
	background-color:#ff5400;
	margin-left:110px;
	margin-top:-8px;
	font-family:宋体;
	font-size:13px;
	text-align:center;
	color:#ffffff;
	line-height:25px;
}

#com .dian{
	font-family:宋体;
	font-size:13px;
	color:#ff4400;
	margin-left:15px;
	margin-top:-5px;	
}
#com .pu{
	font-family:宋体;
	font-size:13px;
	color:#ff4400;
	margin-top:-5px;
	margin-left:12px;	
}
#com .ri{
	margin-left:-60px;
	margin-top:4px;
	border:3px solid #ff5500;
	width:510px;
	height:34px;
	float:left;
}
#com .li{
	background-color:#ff6704;
	font-family:宋体;
	font-size:18px;
	color:#ffffff;
	width:122px;
	height:40px;
	margin-left:0px;
	margin-top:4px;
	border:0;
}
#com .one{
line-height:32px;
margin-left:110px;
font-family:宋体;
	font-size:13px;
}
#com .one .hanliu{
	color:#ff4400;
}
#com .one .more{
	padding-left:42px;

}
#com .cheng{
	background-color:#ff6905;
	width:190px;
	height:33px;
	margin-left:80px;
	margin-top:13px;
	font-family:宋体;
	font-size:17px;
	color:#ffffff;
	line-height:33px;
	text-indent:10px;
	
}
#com .cheng .wenhao{
	padding-left:76px;
}
#com .tian{
	float:left;
	padding-left:86px;
	font-size:16px;
	line-height:28px;
	text-align:center;
	color:#ff4400;
    margin-left:200px;
	margin-top:-30px;
    font-weight:700;
    word-spacing:20px;
}
#com .xian{
	float:left;
	margin-left:420px;
	margin-top:-30px;
	padding-left:86px;
	font-size:14px;
	line-height:28px;
	text-align:center;
	font-weight:700;
    word-spacing:5px;
    font-family:宋体;
}
#com .xian .ju{
color:#e3dde3;
}
#com .xian .shi{
color:#e3dde3;
}
#com .yun{
	text-decoration:none;
	list-style:none;
	width:60px;
	height:28px;
	border:1px solid #f2f2f2;
	float:left;
	margin-left:1100px;
	margin-top:-35px;
	text-decoration:none;
	color:#4b66da;
	font-size:14px;
	font-weight:700;
	padding:3px;		
}
/*第二部分复杂结束*/
/*第三部分左侧开始*/
#ali{
	background-color:#f1f1f1;


}
#ali .left{
	height:450px;
	width:170px;
	background-color:#ff5f03;
	float:left;
	margin-left:80px;
	margin-top:38px;
	font-family:宋体;
	font-size:13px;
	line-height:30px;
	color:#ffffff;
	font-weight:700;
	padding-left:20px;
}
</style>


<body>

<!-- 头部文字区域开始 -->
<div id='dingbu'>
    <span class='dalu'>中国大陆∨</span>
	<span class='qin'>亲，请登录</span>
	<span>免费注册</span>
	<span>手机逛淘宝</span>
	<span class='wode'>我的淘宝</span>
	<span class='gouwuche'>购物车<span class='ling'>∨</span></span>
	<span>★收藏夹</span>
	<span>商品分类</span>
	<span>|</span>
	<span>卖家中心∨</span>
	<span>联系客服∨</span>	
	<span class='wangzhan'><span class='daohang'>☰</span>网站导航∨</span>
</div>
	<!-- 头部文字区域结束 -->
<!-- 中间杭州抢票 -->
<div id='qiang'></div>
<img src="mayun.jpg" id="mayun">
<div id='piao'></div>
<!-- 中间杭州抢票结束 -->
<!-- 第三部分 -->
<!-- 第一空白小部分 -->
<div id='kongbai'></div>
<!-- 第一空白小部分结束 -->
<!-- 第二小部分搜索栏和图片 -->
<div id='com'>
<img src="com.png" class="tao">
<div class='bei'><strong>宝贝 </strong></div>
<span class='dian'> 天猫</span>
<span class='pu'>店铺</span>
<form action="">
	<input type="text" class='ri'>
	<input type="submit" value='搜索' class='li'>
</form>
<span class='one'>新款连衣裙  四件套 <span class='hanliu'> 韩流T恤 </span>时尚女鞋  短裤 半身裙  男士外套  墙纸   行车记录仪  新款男鞋  耳机<span class='more'> 更多> </span></span>
<div class='cheng'> <strong>主题市场</strong>  <span class='wenhao'>☰</span></div>
 <span class='tian'>天猫  聚划算  天猫超市 </span>
	<span class='xian'> <span class='ju'>|</span> 淘抢购 电器械 司法拍卖  中国质造 兴农扶贫 <span class='shi'>|</span> 飞猪旅行 智能生活 苏宁易购</span>
	<form>
	<input type="text" value='云栖大会' class='yun'>
	</form>
</div>	
<!-- 第二部分复杂结束 -->
<!-- 第三部分左侧开始 -->
<div id='ali'>
<div class='left'>
<span><p>女装/男鞋/内衣        > </p></span>
<span><p>鞋靴/箱包/配件        ></p> </span>
<span><p>童装玩具/孕产/用    ></p> </span>
<span><p>家电/数码/手机      ></p> </span>
<span><p> 美妆/洗护/保健品   > </p></span>
<span><p>珠宝/眼镜/手表    ></p>   </span>
<span><p>运动/户外/乐器       ></p> </span>
<span><p>游戏/动漫/影视    ></p> </span>
<span> <p>美食/生鲜/零食   ></p> </span>
<span> <p>鲜花/宠物/农资   > </p></span>
<span> <p>房产/装修/建材   ></p> </span>
<span> <p>家具/家饰/家纺   ></p> </span>
<span>	<p>汽车/二手车/用品   > </p></span>
<span><p>办公/DIY/五金电子   > </p></span>
<span> <p>百货/餐/厨家庭保   ></p></span>
<span><p>学习/卡券/本地服   ></p> </span>
	
</div>






	





</div>






</body>
</html>